<template>
    <div>
        <!-- 用户页面头部 begin -->
        <MemberHeaderView></MemberHeaderView>
        <!-- 用户页面头部 end -->

        <div class="i_bg bg_color">
            <!-- 用户页面中部 begin -->
            <div class="m_content">
                <UserContentLeft @changeView="currentRightComponent = $event" />
                <component :is="currentRightComponent" :productId="currentProductId" :userType="Number(userType)"
                    :fromAdmin="false" @changeView="handleChangeView" />
            </div>
            <!-- 用户页面中部 end -->
            <!-- 用户页面底部 begin -->
            <FooterView></FooterView>
            <!-- 用户页面底部 end -->
        </div>
    </div>
</template>

<script>
import { mapMutations } from 'vuex'
import MemberHeaderView from './MemberHeaderView.vue';
import FooterView from './FooterView.vue';
import UserContentLeft from '@/components/UserContentLeft.vue';
import MemberNewsListRight from '@/components/MemberNewsListRight.vue';
import MemberOrderListRight from '@/components/MemberOrderListRight.vue';
import MemberAddressRight from '@/components/MemberAddressRight.vue';
import MemberUserInfoRight from '@/components/MemberUserInfoRight.vue';
import MemberUserUpdateRight from '@/components/MemberUserUpdateRight.vue';
import MemberCollectRight from '@/components/MemberCollectRight.vue';
import UpdatePasswordRight from '@/components/UpdatePasswordRight.vue';

export default {
    name: 'MemberNewsListView',
    components: {
        MemberHeaderView,
        FooterView,
        UserContentLeft,
        MemberNewsListRight,
        MemberOrderListRight,
        MemberAddressRight,
        MemberUserInfoRight,
        MemberUserUpdateRight,
        MemberCollectRight,
        UpdatePasswordRight
    },
    computed: {
    },
    data() {
        return {
            currentRightComponent: 'MemberNewsListRight', // 默认显示资讯列表
            currentProductId: null,
            userType: window.sessionStorage.getItem('userType') || '0'
        }
    },
    methods: {
        ...mapMutations(['setShowPage']),
    },
    mounted() {
        this.setShowPage(1)
        // 获取路由参数
        const tab = this.$route.query.tab;

        const tabMap = {
            news: 'MemberNewsListRight',
            order: 'MemberOrderListRight',
            address: 'MemberAddressRight',
            collect: 'MemberCollectRight'
        };

        this.currentRightComponent = tabMap[tab] || 'MemberNewsListRight';

        console.log('✅ AdminControllerView 已加载，当前组件：', this.currentRightComponent);
    },
    watch: {
        '$route.query.tab'(newTab) {
            const tabMap = {
                news: 'MemberNewsListRight',
                order: 'MemberOrderListRight',
                address: 'MemberAddressRight',
                info: 'MemberUserInfoRight',
                collect: 'MemberCollectRight',
            };
            this.currentRightComponent = tabMap[newTab] || 'MemberNewsListRight';
        }
    }
}
</script>